<template>
  <!-- 新增角色对话框 -->
  <el-dialog
    title="修改角色"
    width="500px"
    :visible.sync="dialogVisible"
    @open="handleDialogOpen"
  >
    <el-form ref="editForm" :model="formEdit" :rules="rules" label-width="80px">
      <el-form-item label="角色名称" prop="roleName">
        <el-input
          v-model="formEdit.roleName"
          placeholder="请输入角色名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="归属地域">
        <el-input
          v-model="formEdit.areaName"
          clearable
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="菜单权限">
        <el-checkbox v-model="expandMenu" @change="setAllExpand">
          全部展开/折叠
        </el-checkbox>
        <el-checkbox v-model="checkedAllMenu" @change="handleCheckAllChange">
          全选/全不选
        </el-checkbox>
        <el-tree
          ref="editMenuTree"
          :data="menusAll"
          show-checkbox
          node-key="permissionId"
          highlight-current
          :props="defaultTreeProps"
          class="tree-border"
          :default-expand-all="true"
        >
        </el-tree>
      </el-form-item>
      <el-form-item label="备注" prop="roleDesc">
        <el-input
          v-model="formEdit.roleDesc"
          type="textarea"
          placeholder="请输入内容"
          :autosize="{ minRows: 3, maxRows: 4 }"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitEdit">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { updateRole } from '@/api/system/role';
export default {
  name: 'EditDialog',
  props: {
    // 所有菜单
    menusAll: {
      type: Array,
      default: null
    },
    // 角色拥有的菜单
    menusRole: {
      type: Array,
      default: null
    },
    // 编辑表单
    formEdit: {
      type: Object,
      default: () => {
        return {
          roleId: '',
          roleName: '',
          roleDesc: ''
        };
      }
    }
  },
  data() {
    return {
      expandMenu: false, // 折叠菜单
      checkedAllMenu: false, // 全选菜单
      defaultTreeProps: {
        // 树的默认属性
        label: 'name',
        children: 'children'
      },
      rules: {
        // 表单校验规则
        roleName: [
          {
            required: true,
            message: '请输入角色名称',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  computed: {
    // 频繁开关 计算属性
    dialogVisible: {
      get() {
        return this.$parent.dialogEditVisible;
      },
      set(v) {
        this.$parent.dialogEditVisible = v;
      }
    },
    areaOptions() {
      return this.$parent.areaOptions;
    }
  },
  methods: {
    /**
     * 对话框打开
     */
    handleDialogOpen() {
      setTimeout(() => {
        this.expandMenu = true;
        this.checkedAllMenu = false;
        this.setAllExpand(true);
        this.$refs.editMenuTree.setCheckedKeys(this.menusRole);
      }, 0);
    },
    /**
     * 菜单展开折叠
     */
    setAllExpand(state) {
      var nodes = this.$refs.editMenuTree.store.nodesMap;
      for (var i in nodes) {
        nodes[i].expanded = state;
      }
    },
    /**
     * 菜单全选反选
     */
    handleCheckAllChange() {
      if (this.checkedAllMenu) {
        this.setAllExpand(this.checkedAllMenu);
        this.$refs.editMenuTree.setCheckedNodes(this.menusAll);
      } else {
        this.$refs.editMenuTree.setCheckedKeys([]);
      }
    },
    /**
     * 获取菜单选中
     */
    getCheckedKeys() {
      return this.$refs.editMenuTree.getCheckedKeys();
    },
    /**
     * 提交编辑对话框
     */
    async submitEdit() {
      this.$refs['editForm'].validate(async valid => {
        if (valid) {
          const permissionId = this.getCheckedKeys();
          const { data: res } = await updateRole(
            permissionId,
            this.formEdit.roleId,
            this.formEdit.roleName,
            this.formEdit.roleDesc
          );
          console.log('更新角色', res);
          if (res.code === 200) {
            this.$message.success('更新角色成功');
            this.dialogVisible = false;
            this.$parent.getRoles();
          }
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
// 树形控件文字居中微调
::v-deep .vue-treeselect__placeholder,
::v-deep .vue-treeselect__single-value {
  top: 4px;
  left: 6px;
}
</style>
